<template>
  <div>
    <el-dialog title="远程云机" append-to-body :visible.sync="yunjiDialogVisible" width="800px"
               :close-on-click-modal="false" :close-on-press-escape="false" @close="handleClose"
               :before-close="handleQDetailClose">
      <div class="flex">
        <div class="flex-l" v-if="yunjiDialogVisible">
          <div style="position: relative;">
            <div class="yunji-box" v-if="!wss_url">
              <LoadingComponent></LoadingComponent>
            </div>

            <yunjiIframe v-if="wss_url" :wssUrl="wss_url" :deviceId="form.machineId" @reconts="reconts">
            </yunjiIframe>
          </div>
          <!-- <iframe id="xiaosuan" :src="ws" style="width: 100%;height: 656px; " scrolling="no" border="0"
          frameborder="no" framespacing="0" allowfullscreen="true"></iframe> -->
        </div>
        <div class="flex-r">
          <div class="flex-r-title">
            <div>云机名称: <span>{{ form.machineAlias }}</span></div>
            <div>到期时间: <span>{{ parseTime(form.leaseEndTime, '{y}-{m}-{d}') }}</span></div>
          </div>
          <div class="flex-r-qq">QQ账号:<span class="accounts">{{ form.account }}</span>
            <el-tag v-if="form.onlineStatus == 2">已登录</el-tag>
            <el-tag v-else-if="form.onlineStatus == 1" type="warning">未登录</el-tag>
            <el-tag v-else type="danger" size="small">异常</el-tag>
          </div>
          <div class="flex-r-tips">1、请在左侧远程页面中操作登录账号</div>
          <div class="flex-r-tips-1">注意:您要登录的账号为 <span class="accounts">{{
              form.account
            }}</span>,请不要登录其他账号,否则系统将无法准确记录账号状态
          </div>
          <div class="flex-r-tips" style="display: flex;margin-top: 10px;">
            <div>2、</div>
            <div>登录完成后请点击下方确认登录按钮,否则将不会自动挂机</div>
          </div>

          <div class="flex-r-tips-1 flex-r-tips-2" style="font-size: 14px;">若超时间未操作,云机可能卡死,请关闭重试</div>
          <div class="flex-r-tips" style="font-size: 14px;margin-top: 16px;color: #8F92A1;"
               v-if="form.loginType == 1&&form.onlineStatus == 1">
            若登录失败,请
            <el-button @click="delAccounts" type="text"
                       style="text-decoration: underline;font-size: 15px;padding: 0;">删除账号
            </el-button>
            后使用QQ登录重试
          </div>
          <div class="footer">
            <el-button style="    font-size: 16px;
    height: 40px;
    width: 120px;" type="primary" :loading="submitLoading" @click="handleSubmit">
              确认登录
            </el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import LoadingComponent from '../../../indexComponents/LoadingComponent.vue'

import {
  yunjilogin, yunjiClose, delAccount, openAccount, linkClose
} from '@/api/tenantApis/cloudMachine'

export default {
  components: {
    yunjiIframe: () => import('./yunjiIframe.vue'),
    LoadingComponent
  },

  data() {
    return {
      yunjiDialogVisible: false,
      submitLoading: false,
      form: {},
      wss_url: '',
      sessionId: '',
      selectedQ: {},
      qDetailVisible: false,
      isReminder: true,
      isAddqShow: false,
      dataType: '',
      containerName: '',
      account: ''
    }
  },
  filters: {
    filterType(val) {
      if (val == 1) {
        return 'TIM'
      } else {
        return 'QQ'
      }
    }
  },

  created() {

  },

  methods: {
    reconts() {
      console.log('重新连接')
      if (this.wss_url) {
        this.wss_url = ''
        let data = {
          machineId: this.form.machineId,
          account: this.form.account,
          sessionId: this.form.sessionId
        }
        openAccount(data).then(res => {
          this.wss_url = res.data.wssUrl
        })
      }

    },
    async open(row, wss_url, sessionId, type = true, dataType) {
      this.dataType = dataType
      this.containerName = row.containerName
      this.account = row.account
      this.isReminder = type //
      console.log(row, wss_url, sessionId, '888')
      this.wss_url = wss_url;

      this.sessionId = sessionId

      this.selectedQ = row
      this.form = row
      this.yunjiDialogVisible = true
    },

    async handleSubmit() {

      this.$modal.confirm(`在确认登录之前,请检查云机账号是否登录成功`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        this.submitLoading = true
          yunjilogin(this.sessionId, this.dataType, this.containerName, this.account).then(res => {
            this.submitLoading = false
            if (res.code == 200) {
              // 关闭账号
              yunjiClose(this.selectedQ.machineId)
              // 关闭连接
              linkClose(this.selectedQ.machineId)
              this.yunjiDialogVisible = false
              this.$message.success(res.msg)
              this.selectedQ.machineId = res.data.phone_info.id
              this.$emit('update', this.selectedQ)
            }
          }).catch(() => this.submitLoading = false)

      }).catch(() => {
        this.$modal.msg("取消登录")
      })
    },

    // 关闭弹窗
    handleClose() {
      this.submitLoading = false
      this.yunjiDialogVisible = false
      this.$emit('close', this.selectedQ.machineId)
    },
    handleQDetailClose() {
      if (this.isReminder) {
        this.$confirm("此操作不会记录当前qq账号状态,确认关闭吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.yunjiDialogVisible = false
            yunjiClose(this.selectedQ.machineId)
            this.$emit('update', this.selectedQ)
          })
          .catch(() => {
          });
      } else {
        this.yunjiDialogVisible = false
        yunjiClose(this.selectedQ.machineId)
      }
    },

    delAccounts() {
      console.log('delAccounts')
      let that = this
      this.$confirm(`删除账号 ${this.form.account} 吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        let data = {
          id: that.form.id,
          machineId: that.form.machineId,
          account: that.form.account
        }
        yunjiClose(this.selectedQ.machineId)
        delAccount(data).then(res => {
          that.$message.success('账号删除成功')
          that.$emit('update', that.selectedQ)
          // that.$emit('yunjiDelUpdate', that.selectedQ)
          that.yunjiDialogVisible = false

        })

      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-footer {
  text-align: center;
}

.flex {
  .flex-l {
    width: 370px;
    margin-right: 20px;
  }

  .flex-r {
    flex: 1;
  }

  .flex-r {
    .flex-r-title {
      background: #F6F7F9;
      padding: 16px;
      color: #666666;
      font-size: 14px;
      border-radius: 10px;

      span {
        color: #333;
      }
    }

    .flex-r-qq {
      margin: 22px 0;
      color: #000;
      font-weight: 500;
      font-size: 16px;

      .accounts {
        margin-right: 10px;
        font-size: 18px;
      }
    }

    .flex-r-tips {
      color: #090808;
      font-size: 16px;
    }

    .flex-r-tips-1 {
      margin-top: 6px;
      line-height: 22px;
      font-size: 14px;
      margin-left: 26px;
      color: #8F92A1;
    }

    .flex-r-tips-2 {
      color: #F38642;
    }
  }
}

.accounts {
  color: #6C5DD3;
}

.footer {
  margin-top: 80px;
  text-align: center;
}

.yunji-box {
  position: absolute;
  width: 100%;
  height: 350px;
  z-index: 86;
}
</style>
